<template>
  <div class="mvs-container">
    <div class="filter-wrap">
      <div class="seciton-wrap">
        <!-- 分类切换 地区 -->
        <span class="section-type">地区:</span>
        <ul class="tabs-wrap">
          <li class="tab">
            <span
              class="title"
              :class="{ active: area == '全部' }"
              @click="area = '全部'"
            >
              全部
            </span>
          </li>
          <li class="tab">
            <span
              class="title"
              :class="{ active: area == '内地' }"
              @click="area = '内地'"
            >
              内地
            </span>
          </li>
          <li class="tab">
            <span
              class="title"
              :class="{ active: area == '港台' }"
              @click="area = '港台'"
            >
              港台
            </span>
          </li>
          <li class="tab">
            <span
              class="title"
              :class="{ active: area == '欧美' }"
              @click="area = '欧美'"
            >
              欧美
            </span>
          </li>
          <li class="tab">
            <span
              class="title"
              :class="{ active: area == '日本' }"
              @click="area = '日本'"
            >
              日本
            </span>
          </li>
          <li class="tab">
            <span
              class="title"
              :class="{ active: area == '韩国' }"
              @click="area = '韩国'"
            >
              韩国
            </span>
          </li>
        </ul>
      </div>
      <div class="type-wrap">
        <span class="type-type">类型:</span>
        <ul class="tabs-wrap">
          <li class="tab">
            <span
              class="title"
              :class="{ active: type == '全部' }"
              @click="type = '全部'"
            >
              全部
            </span>
          </li>
          <li class="tab">
            <span
              class="title"
              :class="{ active: type == '官方版' }"
              @click="type = '官方版'"
            >
              官方版
            </span>
          </li>
          <li class="tab">
            <span
              class="title"
              :class="{ active: type == '原声' }"
              @click="type = '原声'"
            >
              原声
            </span>
          </li>
          <li class="tab">
            <span
              class="title"
              :class="{ active: type == '现场版' }"
              @click="type = '现场版'"
            >
              现场版
            </span>
          </li>
          <li class="tab">
            <span
              class="title"
              :class="{ active: type == '网易出品' }"
              @click="type = '网易出品'"
            >
              网易出品
            </span>
          </li>
        </ul>
      </div>
      <div class="order-wrap">
        <span class="order-type">排序:</span>
        <ul class="tabs-wrap">
          <li class="tab">
            <span
              class="title"
              :class="{ active: order == '上升最快' }"
              @click="order = '上升最快'"
            >
              上升最快
            </span>
          </li>
          <li class="tab">
            <span
              class="title"
              :class="{ active: order == '最热' }"
              @click="order = '最热'"
            >
              最热
            </span>
          </li>
          <li class="tab">
            <span
              class="title"
              :class="{ active: order == '最新' }"
              @click="order = '最新'"
            >
              最新
            </span>
          </li>
        </ul>
      </div>
    </div>
    <!-- mv容器 -->
    <!-- 推荐MV -->
    <div class="mvs">
      <div class="items">
        <div class="item" v-for="(k,index) in list" :key="index" @click="toMV(k.id)">
          <div class="img-wrap">
            <img :src="k.cover" alt="" />
            <div class="num-wrap">
              <div class="iconfont icon-play"></div>
              <div class="num">{{k.playCount}}</div>
            </div>
          </div>
          <div class="info-wrap">
            <div class="name">{{ k.name }}</div>
            <div class="singer">{{ k.artistName }}</div>
          </div>
        </div>
      </div>
      <!-- 分页器
      total 总条数
      current-page 当前页
      page-size 每页多少条数据
      current-change 页码改变事件
     -->
    <el-pagination
      @current-change="handleCurrentChange"
      background
      layout="prev, pager, next"
      :total="total"
      :current-page="page"
      :page-size="10"
    ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //总条数
      total:20,
      //页码
      page:1,
      //一页几个
      limit:8,
      //地区
      area:'全部',
      //类型
      type:'全部',
      //排序
      order:'上升最快',
      //查询结果
      list:[]
    }
  },
  //侦听器
  watch:{
    //请求参数发生改变页面数据刷新
    area(){
      this.page =1
      this.getList()
    },
    type(){
       this.page =1
      this.getList()
    },
    order(){
       this.page =1
      this.getList()
    }
  },
  created() {
    this.getList()
  },
  methods:{
    getList(){
      this.axios.get('mv/all',{
        params:{
          area:this.area,
          type:this.type,
          order:this.order,
          limit:this.limit,
          //偏移量 同于分页 （页码-1）* 数量limit
          offset:(this.page-1)*this.limit
        }
      }).then(res=>{
        console.log(res);
        this.list = res.data.data
        //mv的播放次数如果过万就加上字符串
        for(let i =0;i<this.list.length;i++){
          if(this.list[i].playCount>10000){
            this.list[i].playCount = 
            parseInt(this.list[i].playCount / 10000)+'万'
          }
        }
        //保存总条数
        //有的数据没有count 如果有就赋值
        if(res.data.count){
           this.total = res.data.count
        }
       
      })
    },
    //页码改变事件
    handleCurrentChange(val){
      this.page = val
      this.getList()
    },
    toMV(id){
      this.$router.push(`/mv?id=${id}`)
    }
  }
}
</script>

<style>

</style>